<template>
    <div class="main">
      <section>
        <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="right" label-width="120px">
          <el-row :gutter="50">
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
              <el-form-item label="特权包名称：" prop="name">
                <el-input @keyup.enter.native="search" v-model="listQuery.name" placeholder="礼包名称" maxlength="50" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
              <el-form-item label="特权包状态：" prop="upshelf">
                <el-select v-model="listQuery.upshelf" clearable>
                  <el-option  label="关闭" :value="0"></el-option>
                  <el-option  label="启用" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="" class="btn-item">
            <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
            <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
          </el-form-item>
        </el-form>
        <div v-if="rightsButtons['add']" class="btn-block">
          <router-link :to="{name: 'newBoxGiftBagAdd', query: { type: 4}}">
            <el-button type="success" size="small" icon="el-icon-circle-plus" plain >新建箱起特权包</el-button>
          </router-link>
        </div>
        <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
          <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
          <el-table-column align="center" label="礼包名称" prop="name"></el-table-column>
          <el-table-column align="center" label="启用/关闭" prop="upshelf" width="160">
            <template slot-scope="scope">
              <span v-if="scope.row.upshelf===0">关闭</span>
              <span v-else-if="scope.row.upshelf===1">启用</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间">
                    <template slot-scope="scope">
                        <span>{{ formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss') }}</span>
                    </template> 
                </el-table-column>
          <el-table-column align="center" label="操作" width="200" v-if="rightsButtons['edit'] || rightsButtons['view']">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" v-if="rightsButtons['edit']" @click="$router.push({ name: 'newBoxGiftBagEdit', query: { type: scope.row.upshelf, id: scope.row.bonusGiftId } })">编辑</el-button>
              <el-button type="primary" size="mini" v-if="rightsButtons['view']" @click="$router.push({ name: 'newBoxGiftBagView', query: { type: 2, id: scope.row.bonusGiftId } })">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listQuery.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal">
        </el-pagination>
      </section>
    </div>
</template>
<script>
export default {
  name: 'newBoxGiftBag',
  data () {
    return {
      listQuery: {
        pageIndex: 1,
        pageSize: 10,
        name: '',
        bindCloudBoxSeriesId: '',
        upshelf: '',
        giftType: '4'
      },
      yuncangList: [],
      listLoading: false,
      list: [],
      listTotal: 0,
      btnLoading: false
    }
  },
  created () {
    this.getList()
    if (this.$store.getters.cachedViews.length === 0) {
      this.getYuncangList()
    }
  },
  activated () {
    this.getYuncangList()
    this.getList()
  },
  methods: {
    getYuncangList () {
      this.request({
        url: '/bsnl-product/box/list/cloudStock',
        method: 'get'
      }).then(({data}) => {
        this.yuncangList = data
      }).catch(err => {
        console.log(err)
        this.yuncangList = []
      })
    },
    search () {
      this.listQuery.pageIndex =1
      this.getList()
    },
    // 清空搜索条件
    resetForm (formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    },
    getList () {
      this.listLoading = true;
      this.request({
        url: '/bsnl-product/box/bonus/gift/list',
        method: 'post',
        data: this.listQuery
      }).then(({data, total}) => {
        this.list = data
        this.listTotal = total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      })
    },
    handleSizeChange (value) {
      this.listQuery.pageSize = value
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.pageIndex = val
      this.getList()
    }
  }
}
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .banner-container{
        .avatar-uploader .el-upload{
            width: 120px;
            height: 120px;
            line-height: 118px;
        }
    }
    .activity-img{
        @include flex;
        @include center;
        min-height: 60px;
        img{
            width:100%;
            height: 100%;
            max-width: 60px;
            max-height: 60px;
        }
    }
    .el-row{
        margin-bottom: 12px;
    }
</style>
